<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];

export default {

  name: "Checkboxes",
  props: {
    title: String,
    subfilters: Array,
    inline: false
  },
  data() {
    return {
      cityOptions: ['上海', '北京', '广州', '深圳'],
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  }
}
</script>

<template>
  <div class="checkboxes">
    <label v-if="title!==undefined" class="main-label">{{ title }}</label>
    <div :class="['option-block',{'inline-display':inline}]">
      <el-checkbox class="checkbox" v-model="checkAll" @change="handleCheckAllChange">
        全选
      </el-checkbox>
      <div style="height: 10px"></div>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
      </el-checkbox-group>
      <div class="sub-filters">
        <Checkboxes v-if="subfilters.length!==0" v-for="filter in subfilters" :inline=true
                    :subfilters="null"></Checkboxes>
      </div>
    </div>
  </div>
</template>

<style scoped>
.checkboxes {
  display: block;
  clear: both;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.checkbox {
  margin-right: 30px !important;
}

.inline-display {
  display: flex;
}

.option-block {
  width: auto;
  overflow: hidden;
}

.sub-filters {
  margin-bottom: 5px;
  padding-top: 10px;
}

.main-label {
  float: left;
  width: 4em;
  margin-right: 8px;
  margin-top: 2px;
  font-size: 14px;
  text-align: right;
}
</style>